<template>
  <div>
    <h2>分类列表</h2>
    <div class="List">
      <Item title="图片">
        <template #default>
          <img src="./assets/1.png" style="width: 100%" alt="" />
        </template>
        <template v-slot:footer>
          <a href="###">点击查看详情</a>
        </template>
      </Item>

      <Item title="音乐">
        <template #default>
          <ul>
            <li>等你下课</li>
            <li>我的天空</li>
          </ul>
        </template>
        <template v-slot:footer>
          <button>更多音乐请点击我</button>
        </template>
      </Item>
      
      <Item title="视频">
        <template #default> XXX </template>
        <template v-slot:footer>
          <p>好看就点个赞吧~</p>
        </template>
      </Item>
    </div>
  </div>
</template>

<script>
import Item from "@/components/Item";
export default {
  name: "App",
  components: {
    Item,
  },
  data() {
    return {
      // itemData: [
      //   {
      //     id: "001",
      //     content: ["火锅", "烧烤", "螺蛳粉"],
      //     title: "美食",
      //   },
      //   {
      //     id: "002",
      //     content: ["等你下课", "我的天空", "海阔天空"],
      //     title: "音乐",
      //   },
      //   {
      //     id: "003",
      //     content: ["CF", "DNF", "CS"],
      //     title: "游戏",
      //   },
      // ],
    };
  },
};
</script>

<style>
.List {
  display: flex;
  justify-content: space-around;
}
</style>